<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <title>table</title>
  <link rel="stylesheet" href="./css/yb-iconfont.css">
  <link rel="stylesheet" href="./css/yb-form.css">
  <link rel="stylesheet" href="./css/yb-modal.css">
  <link rel="stylesheet" href="./css/yb-button.css">
  <link rel="stylesheet" href="./css/yb-transform.css">
  <link rel="stylesheet" href="./css/yb-select.css">
  <link rel="stylesheet" href="./css/yb-cookbook.css">
  <link rel="stylesheet" href="./css/colorpicker.css">
  <link rel="stylesheet" href="./table-drag-modal.css">
  <link rel="stylesheet" href="./vue-table.css">
  <script src="./vue.min.js"></script>
  <!-- <script src="./Sortable.min.js"></script>
  <script src="./vuedraggable.umd.min.js"></script> -->
  <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
  <script src="https://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
  <script src="./jQuery.js"></script>
  <script src="./table.js"></script>
  <script src="./vue-table.js"></script>
  <script src="./table-drag-modal.js"></script>
  <script src="./js/vue-transform.js"></script>
  <script src="./js/vue-select.js"></script>
  <script src="./js/vue-cookbook.js"></script>
  <script src="./js/vue-cookbook-order.js"></script>
  <script src="./js/colorpicker.js"></script>
</head>

<body>
<div id="app" style="margin: 20px"></div>
<div>
  <input class="yb-checkbox" type="checkbox" checked disabled />
  <input class="yb-checkbox" type="checkbox" />
  <input class="yb-radio" type="radio" checked disabled name="test">
  <input class="yb-radio" type="radio" name="test">
  <div class="yb-search">
    <input type="text" class="yb-input">
    <span class="iconfont icon-sousuo"></span>
  </div>
</div>
<script>
  // $('#app').vueCookbookOrder();
</script>
<script type="text/javascript">
  ;(function () {
    window.transform = $('#app').vueTransform({
      data: [{
        guid: '1',
        label: '测试1',
        children: [{
          guid: '2',
          label: '测试2'
        }]
      }],
      leftHeaderHtml: function () {
        return `
          <div style="display: flex; align-items: center; justify-content: center; height: 50px; background-color: #F4F5F9;">
            <div class="yb-search">
              <input type="text" class="yb-input" style="width: 260px" placeholder="搜索品种名称">
              <span class="iconfont icon-sousuo"></span>
            </div>
          </div>
          <div style="height: 40px; background-color: #FFFFFF; position: relative; display: flex; align-items: center; padding: 0 5px">
            <span class="iconfont icon-xiangzuo" style="margin-top: -4px; margin-right: 5px; width: 16px;height: 16px; background-color: #B2B2B2; border-radius: 50%; color: #FFFFFF"></span>
            <div class="item-container">
              <div class="item active">测试001</div>
              <div class="item">测试002</div>
              <div class="item">测试</div>
              <div class="item">测试001</div>
              <div class="item">测试002</div>
              <div class="item">测试</div>
              <div class="item">测试001</div>
              <div class="item">测试002</div>
              <div class="item">测试</div>
            </div>
            <span class="iconfont icon-xiangyou1" style="margin-top: -4px;margin-left: 5px;width: 16px;height: 16px; background-color: #B2B2B2; border-radius: 50%; color: #FFFFFF"></span>
          </div>
        `;
      },
      rightHeaderHtml: function (count) {
        return `
        <div style="padding: 0 20px; background-color: #F4F5F9; font-size: 14px; line-height: 50px; align-items: center">
          <span style="color: #333333;">已选择年级</span>
          <span style="color: #0BC3A7">${count}个</span>
        </div>
      `;
      },
      reset: function () {
        $('.search').val('');
      },
      selectedItem: [{
        guid: '2',
        label: '测试2'
      }]
    })
    window.test = function (el) {
      console.log(el)
      const input = $(el).prev()[0];
      transform.setData(transform.getData().filter(item => item.label.includes(input.value)));
    }
  })()
</script>

<style>

  .item-container {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .item-container .item {
    padding: 0 10px;
    line-height: 40px;
    font-size: 12px;
    color: #202020;
    cursor: pointer;
    flex-shrink: 0;
  }

  .item-container .item.active {
    color: #0bc3a7;
    border-bottom: 2px solid #0bc3a7;
  }

</style>
</body>

</html>